<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个
    </title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

    <div id="app">
        <span :title="message" style="font-size: 20px ; color:	#48D1CC;">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span>

        {{message}}
        <span> -------------------------------------------------------------</span>

        <div style="color:	#1E90FF ; font-size: 30px;">
            {{message2}}
            <span :style="'color:' +color+ ';'  ">
                能改变颜色的内容
            </span>
        </div>

        <span> -------------------------------------------------------------</span>
        <div style=" color: rgb(168, 55, 112); font-size: 20px;">
            {{message3}}    
            <p v-if="seen" style="color: blueviolet;">刚刚没看到,现在你看到我了</p>
        </div>
        <span>-------------------------------------------------------------</span>
        <div>
            <ol>
                <li v-for="message4 in list" style="color: cornflowerblue; font-size: 20px;">
                    {{message4}} </li>
            </ol>
        </div>

        <div>

            <ol>
                <li v-for="message5 in list2 ">
                    {{ message5.text}}
                </li>
            </ol>

        </div>

    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello ,这个是李某的第一个Vue程序!' + '页面加载于： ' + new Date().toLocaleString(),
                message2: "这是我的第二个提示信息",
                color: 'red',
                message3: "这个是第三个提示信息",
                seen: true,
                list: ['战地1', '战地2', '战地3', '战地4', '战地5'],
                list2: [
                    { text: '玩战地' },
                    { text: 'rushB' },
                    { text: '荒野求生' },


                ]

                // 上面  el是定位 ，定位到 App ，格式是#+id    
                //
                //  seen: true, 就是 真   seen: false,  就是  假
                // message后面是想要输出的内容

            }
        })
    </script>

</body>

</html>